<!DOCTYPE html>
<html>
<head>
<title>菜单管理</title>
#parse("common/header.html")
</head>
<body>
<div id="app" v-cloak>
	<div v-show="showList">
		<div class="grid-btn">
			<a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
			<a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
			<a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
            <a class="btn btn-primary" @click="setButton"><i class="fa fa-asterisk"></i>&nbsp;设置按钮</a>
		</div>
	    <table id="grid"></table>
	    <div id="gridPager"></div>
	</div>
  
    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">
        
            <div class="form-group">
                <div class="col-sm-2 control-label">菜单名称</div>
                <div class="col-sm-10">
                  <!-- <input type="text" class="form-control" v-model="menu.menuName" placeholder="菜单名称"/> -->
                  <el-input v-model="menu.menuName" placeholder="菜单名称"></el-input>
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label">上级菜单</div>
                <div class="col-sm-10">
                  <input type="text" class="form-control" style="cursor:pointer;" v-model="menu.parentName" @click="menuTree" readonly="readonly" placeholder="一级菜单"/>
                  <!-- <el-input v-model="menu.parentName" readonly="readonly" placeholder="一级菜单" style="cursor:pointer;" @click="menuTree"></el-input> -->
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label">菜单URL</div>
                <div class="col-sm-10">
                  <el-input v-model="menu.linkUrl" placeholder="菜单URL"></el-input>
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label">授权标识</div>
                <div class="col-sm-10">
                  <el-input v-model="menu.accessCode" placeholder="多个用逗号分隔，如：user:list,user:create"></el-input>
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label">菜单图标</div>
                <div class="col-sm-10">
                  <!-- <input type="text" class="form-control" v-model="menu.iconUrl" placeholder="菜单图标"/> -->
                  <el-input v-model="menu.iconUrl" placeholder="菜单图标"></el-input>
                  <code style="margin-top:4px;display: block;">获取图标：http://fontawesome.io/icons/</code>
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label">排序字段</div>
                <div class="col-sm-10">
                  <!-- <input type="text" class="form-control" v-model="menu.iconUrl" placeholder="菜单图标"/> -->
                  <el-input-number v-model="menu.orderColumn" :min="1"></el-input-number>
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label"></div> 
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>
    
    <el-dialog title="设置按钮" :visible.sync="dialogFormVisible" >
      <el-form :model="buttonForm">
        <el-transfer v-model="menuButton.menuButtonList" :data="buttonList" :props="{ key: 'buttonCode', label: 'buttonName' }"></el-transfer>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveButton">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    
</div>

<!-- 选择菜单 -->
<div id="menuLayer" style="display: none;padding:10px;">
    <ul id="menuTree" class="ztree"></ul>
</div>

<!-- 
<div id="buttonLayer" style="display: none;padding:10px;">
    <el-checkbox-group v-model="checkButtonList">
        <el-checkbox label="复选框 A"></el-checkbox>
        <el-checkbox label="复选框 B"></el-checkbox>
        <el-checkbox label="复选框 C"></el-checkbox>
    </el-checkbox-group>
</div> -->

<script src="${rc.contextPath}/js/sys/menu.js?_${date.systemTime}"></script>
</body>
</html>